<html>
<head>
<link type="text/css" rel="stylesheet" href="style.css"  />
<script type="text/javascript" src="../src/jquery.js"></script>
<style>
#sidepaneltab {
  position:fixed;
  top:250px;
  height:50px;
  width:50px;
  background-color:black;
  border-radius:0 25px 25px 0;
  cursor:pointer;
}
#sidepanel {
  position:fixed;
  top:250px;
  left:-200px;
  height:300px;
  width:200px;
  background-color:yellow;
}
</style>
</head>
<body>
	<div id="sidepanel"></div>
	<div id="sidepaneltab" class="sideclosed"></div>

	<script type="text/javascript">
		$(".sideclosed").click(function () {
		  var $this = $(this);
		  $('#sidepanel, #sidepaneltab').animate({
			left: ($this.hasClass("open") ? '-' : '+') + '=200' // if it should open use '+' else use '-'
		  }, 1000);
		  // now toggle open class
		  $this.toggleClass("open");
		});
	</script>
	
</body>
</html>